<template>
  <!--采购部门-->
  <div class="buyer">
    <div class="shouye">
      <span>{{ $t('market.purchaseDept') }}</span>
    </div>
    <hr class="hr1">
    <div class="head">
      <ul class="header">
        <li>
          <div class="firstHead">
            {{ $t('market.returnRate') }}:
            <span class="lastHead">{{ headerInfo.returnRate }}</span>
          </div>
        </li>
        <li>
          <div class="firstHead">
            {{ $t('market.thisReturnRate') }}:
            <span class="lastHead">{{ headerInfo.thisReturnRate }}</span>
          </div>
        </li>
        <li>
          <div class="firstHead">
            {{ $t('market.achievementRate') }}:
            <span class="lastHead">{{ headerInfo.achievementRate }}</span>
          </div>
        </li>
        <li>
          <div class="firstHead">
            {{ $t('market.thisAchievementRate') }}:
            <span class="lastHead">{{ headerInfo.thisAchievementRate }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="tworow">
      <div class="tworow_1">
        <!--近两月采购员交期达成率-->
        <buyerYield :data-sheets="dataSheets" />
      </div>
      <div class="tworow_2">
        <ul class="header">
          <li @click="newlyOrder('/purchaseOrderList')">
            <div class="firstHead" :title="$t('market.notApprovedSum')">{{ $t('market.notApprovedSum') }}</div>
            <div class="lastHead">{{ headerInfo.notApprovedSum }}</div>
          </li>
          <li @click="newlyOrder('/purchaseOrderList')">
            <div class="firstHead" :title="$t('market.lateOrderQty')">{{ $t('market.lateOrderQty') }}</div>
            <div class="lastHead">{{ headerInfo.lateOrderQty }}</div>
          </li>
          <li @click="newlyOrder('/storageList')">
            <div class="firstHead" :title="$t('market.purchaseReceiptQty')">{{ $t('market.purchaseReceiptQty') }}</div>
            <div class="lastHead">{{ headerInfo.purchaseReceiptQty }}</div>
          </li>
          <li @click="newlyOrder('/purchasePriceList')">
            <div class="firstHead" :title="$t('market.receiptQty')">{{ $t('market.receiptQty') }}</div>
            <div class="lastHead">{{ headerInfo.priceList }}</div>
          </li>
          <li @click="newlyOrder('/purchaseOrderList')">
            <div class="firstHead" :title="$t('market.lateOrderQuantity')">{{ $t('market.lateOrderQuantity') }}</div>
            <div class="lastHead">{{ headerInfo.lateOrderQuantity }}</div>
          </li>
          <li @click="newlyOrder('/supplierList')">
            <div class="firstHead" :title="$t('market.newSupplierQty')">{{ $t('market.newSupplierQty') }}</div>
            <div class="lastHead">{{ headerInfo.newSupplierQty }}</div>
          </li>
        </ul>
        <jc-title style="margin-top: 10px;" :title1="$t('market.quickMenu')" :division="false" />
        <hr class="hr1">
        <div class="skipUrl">
          <el-button v-for="item in saleData" :key="item.name" type="success" plain @click="newlyOrder(item.path)">{{ item.name }}</el-button>
        </div>
      </div>
      <div class="tworow_3">
        <!--季度严重迟交供应商-->
        <supplierLate :supplier-list="supplierList" />
      </div>
    </div>
    <div class="form_body">
      <jc-title :title1="$t('market.proDemand')" :division="false" />
      <purchaseDemand />
    </div>
    <!-- 近一年采购交期达成率 -->
    <yearYield class="line" :rate-list="rateList" />
  </div>
</template>

<script>
import buyerYield from '@/views/homePageNew/buyerHome/component/buyerYield'
import supplierLate from '@/views/homePageNew/buyerHome/component/supplierLate'
import purchaseDemand from '@/views/homePageNew/buyerHome/component/purchaseDemand'
import yearYield from '@/views/homePageNew/buyerHome/component/yearYield'
import jcTitle from '@/components/Title'
import { queryHomePageData } from '@/api/homePageNew/buyerHome'
export default {
  components: {
    jcTitle,
    buyerYield,
    supplierLate,
    purchaseDemand,
    yearYield
  },
  data() {
    return {
      saleData: [
        { name: this.$t('menu.modifyPriceList'), path: '/modifyPriceList' },
        { name: this.$t('menu.purchasePriceTao'), path: '/purchasePriceList' },
        { name: this.$t('menu.purOrderAsi'), path: '/purchaseOrderList' },
        { name: this.$t('menu.storageTong'), path: '/storageList' },
        { name: this.$t('menu.returnMater'), path: '/returnMaterList' },
        { name: this.$t('menu.applyList'), path: '/applyList' },
        { name: this.$t('menu.createApply'), path: '/createApply' },
        { name: this.$t('menu.supplierList'), path: '/supplierList' }
      ],
      dataSheets: [],
      supplierList: [],
      rateList: [],
      headerInfo: {
        returnRate: 0,
        thisReturnRate: 0,
        achievementRate: 0,
        thisAchievementRate: 0,
        notApprovedSum: 0,
        lateOrderQty: 0,
        purchaseReceiptQty: 0,
        priceList: 0,
        lateOrderQuantity: 0,
        newSupplierQty: 0
      }
    }
  },
  created() {
    this.queryBuyer()
  },
  methods: {
    queryBuyer() {
      queryHomePageData({}).then(res => {
        if (res.code === 0) {
          this.headerInfo = res.data
          this.dataSheets = res.data.dataSheets
          this.supplierList = res.data.supplierList
          this.rateList = res.data.rateList
        }
      })
    },
    // 跳转
    newlyOrder(path) {
      this.$router.push({ path: path })
    }
  }
}
</script>

<style scoped lang="scss">
.buyer {
  background: #fff;
  padding: 10px;
  .shouye {
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 550;
    .el-tagel-tag {
      margin-left: 10px;
    }
  }
  .header {
    background: #71b5fd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    li {
      list-style: none;
      width: 14%;
      min-width: 165px;
      padding: 8px 0;
      color: #fff;
      .lastHead {
        color: #e54847;
        font-weight: 600;
      }
    }
  }
  .form_body {
    position: relative;
    background-color: #fff;
    margin: 10px 0;
    min-height: 400px;
  }
  .tworow {
    margin-top: 10px;
    display: flex;
    .tworow_1, .tworow_3 {
      width: 30%;
      height: 400px;
    }
    .tworow_2 {
      height: 400px;
      margin-top: 10px;
      .header {
        background: #fff;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          padding: 0;
          width: 28%;
          background-color: rgb(64,158,255,0.1);
          border-radius: 2px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 8px;
          .firstHead {
            padding: 8px 0;
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #FFF;
            background: #3f94ec;
            font-weight: 600;
            letter-spacing: 2px;
            height: 32px;
            overflow: hidden;
          }
          .lastHead {
            width: 100%;
            text-align: center;
            padding: 10px 0;
            font-size: 32px;
            color: #666;
            font-weight: 500;
            border: 1px solid #ccc;
            border-top: none;
          }
        }
      }
      .skipUrl {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        .el-button {
          width: 18.8%;
          margin: 0 5px;
        }
        .el-button--success.is-plain {
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>

